<template>
  <footer class="footer" v-if="list.length">
    <span class="todo-count"
      ><strong>{{ leftCount }}</strong> item left</span
    >
    <ul class="filters">
      <li>
        <a
          @click="changeType('all')"
          :class="{ selected: type === 'all' }"
          href="#/"
        >
          All
        </a>
      </li>
      <li>
        <a
          @click="changeType('active')"
          :class="{ selected: type === 'active' }"
          href="#/active"
        >
          Active
        </a>
      </li>
      <li>
        <a
          @click="changeType('completed')"
          :class="{ selected: type === 'completed' }"
          href="#/completed"
        >
          Completed
        </a>
      </li>
    </ul>
    <button
      class="clear-completed"
      v-if="isShowClear"
      @click="clear"
    >
      Clear completed
    </button>
  </footer>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['list', 'type']),
    ...mapGetters(['leftCount', 'isShowClear'])
  },
  methods: {
    ...mapMutations(['changeType', 'clear'])
  },
}
</script>

<style></style>
